﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="es" lang="es" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Msg</title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <meta http-equiv="PRAGMA" content="NO-CACHE" />
        <meta http-equiv="Expires" content="01-Mar-94 00:00:01 GMT" />
        <meta http-equiv="CACHE-CONTROL" content="NO-CACHE,NO-STORE,MUST-REVALIDATE" />
        <meta name="author" content="Uri" />
        <link rel="shortcut icon" href="#" type="image/x-icon" />
        <link rel="stylesheet" href="css/reset.css" type="text/css" charset="utf-8" />
        <link rel="stylesheet" href="css/index.css" type="text/css" charset="utf-8" />
        <link rel="stylesheet" href="css/msg.css" type="text/css" charset="utf-8" />
    </head>
    <body>
        <div id="wraper">
            <h1>Msg</h1>
            <p>Add a message to the body.</p>
            <h2>Source code</h2>
            <p>
                <a href="js/jquery.msg.js" title="Development code">Development code (3,21 KB)</a>
            </p>
            <p>
                <a href="js/jquery.msg.min.js" title="Minified code">Minified code (1,96 KB)</a>
            </p>
            <h2>Documentation</h2>
            <p>$.fn.jQueryMsg(options);</p>
            <p>options: object with the message properties</p>
            <table>
                <tr>
                    <th>Property</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
                <tr>
                    <td>msg</td>
                    <td>String</td>
                    <td>undefined</td>
                    <td>message to show. Required</td>
                </tr>
                <tr>
                    <td>msgClass</td>
                    <td>String</td>
                    <td>'jquerymsgclass'</td>
                    <td>container class</td>
                </tr>
                <tr>
                    <td>speed</td>
                    <td>Integer</td>
                    <td>0</td>
                    <td>effects' speed</td>
                </tr>
                <tr>
                    <td>delay</td>
                    <td>Integer</td>
                    <td>100</td>
                    <td>delay between messages</td>
                </tr>
                <tr>
                    <td>timeout</td>
                    <td>Integer</td>
                    <td>3000</td>
                    <td>maximum time the message is shown on the screen. 0 for permanent</td>
                </tr>
                <tr>
                    <td>fx</td>
                    <td>String</td>
                    <td>'none'</td>
                    <td>effect: set it to none, fade or slide</td>
                </tr>
            </table>
            <h2>TODO</h2>
            <ul>
                <li>don't set 'speed' too high, it may loose some events</li>
                <li>option: message tag</li>
                <li>option: content tag</li>
            </ul>
            <h2>Demo</h2>
            <div class="demo">
                <a class="alert">Show alert</a>
                <a class="error">Show error</a>
            </div>
            <div class="demo">
                <a class="alertFade">Show alert (fade)</a>
                <a class="errorFade">Show error (fade)</a>
            </div>
            <div class="demo">
                <a class="alertSlide">Show alert (slide)</a>
                <a class="errorSlide">Show error (slide)</a>
            </div>
            <h2>License</h2>
            <p>Released under the <a href="http://www.opensource.org/licenses/mit-license.php" title="MIT License">MIT License</a>.</p>
        </div>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.msg.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('a.alert').click(function() {
                    $.fn.jQueryMsg({
                        msg: 'Showing alert!!',
                        msgClass: 'alert'
                    });
                });
                $('a.error').click(function() {
                    $.fn.jQueryMsg({
                        msg: 'Error Message!!',
                        msgClass: 'error'
                    });
                });
                $('a.alertFade').click(function() {
                    $.fn.jQueryMsg({
                        msg: 'Showing alert!!',
                        msgClass: 'alert',
                        fx: 'fade',
                        speed: 1000
                    });
                });
                $('a.errorFade').click(function() {
                    $.fn.jQueryMsg({
                        msg: 'Error Message!!',
                        msgClass: 'error',
                        fx: 'fade',
                        speed: 1000
                    });
                });
                $('a.alertSlide').click(function() {
                    $.fn.jQueryMsg({
                        msg: 'Showing alert!!',
                        msgClass: 'alert',
                        fx: 'slide',
                        speed: 500
                    });
                });
                $('a.errorSlide').click(function() {
                    $.fn.jQueryMsg({
                        msg: 'Error Message!!',
                        msgClass: 'error',
                        fx: 'slide',
                        speed: 500
                    });
                });
            });
        </script>
    </body>
</html>